<template>
  <div class="subsidy_login">
    <a class="anchor_explanation" href="javascript:;" @click="anchorExplanation('#anchor_img')">补贴说明</a>
    <div class="item_input">
      <div class="input_bg">
        <input type="text" v-model.number="phone" placeholder="请输入手机号">
      </div>
    </div>
<!--    <div class="item_input">-->
<!--      <div class="input_bg">-->
<!--        <input type="text" v-model="imgCode" placeholder="请输入图像验证码">-->
<!--      </div>-->
<!--      <img class="code_img" :src="captchaPath" alt="" @click="getCaptcha">-->
<!--    </div>-->
    <div class="item_input">
      <div class="input_bg">
        <input type="text" v-model="code" placeholder="请输入验证码">
      </div>
      <button @click="getTime" :disabled="codeText === '获取验证码'? false: true" :style="{backgroundColor: (codeText === '获取验证码'? '#febf69': '#caae38')}">{{codeText}}</button>
    </div>
    <div class="item_input">
      <div class="input_bg">
        <input type="text" v-model="name" placeholder="请输入真实姓名">
      </div>
    </div>
    <div class="item_input">
      <div class="input_bg">
        <input type="text" v-model="company" placeholder="请输入工作单位" @click="companyShow = true" readonly>
      </div>
    </div>
    <div class="item_input">
      <div class="input_bg">
        <input type="text" v-model="address" placeholder="请选择单位所在地" @click="addressShow = true,getAddress()"  readonly>
      </div>
    </div>
    <button class="subsidy_login_btn" @click="setsubsidy_login"></button>

    <img id="anchor_img" class="hb_img" src="../../../assets/img/modules/subsidy/subsidy_1.png" alt="">
    <img v-if="gzOrbeijing" class="hb_img" src="../../../assets/img/modules/subsidy/subsidy_2_beijing.png" alt="">
    <img v-else class="hb_img" src="../../../assets/img/modules/subsidy/subsidy_2.png" alt="">
    <img class="hb_img" src="../../../assets/img/modules/subsidy/subsidy_3.png" alt="">
    <div class="footer_body">
      <div class="p_list">
        <p v-if="gzOrbeijing">* 对补贴福利不够了解？<br>
          关注国开企业职工在线公众号<br>
          长按二维码识别</p>
        <p v-else>* 对补贴福利不够了解？<br>
          关注国开广州实验在线公众号<br>
          长按二维码识别</p>
        <p>服务热线：400-009-9661</p>
      </div>
      <img v-if="gzOrbeijing" src="../../../assets/img/modules/subsidy/subsidy_5_beijing.png" alt="">
      <img v-else src="../../../assets/img/modules/subsidy/subsidy_5.png" alt="">
    </div>
    <!--选择企业弹窗-->
    <van-popup
        v-model="companyShow"
        position="bottom"
        :style="{ height: '60%' }">
      <div v-if="manualShowt" class="manual_input">
        <van-nav-bar
            title="手动输入地址"
            left-text="返回"
            right-text="取消"
            left-arrow
            @click-left="manualShowt = false, companyList=[]"
            @click-right="companyShow = false"
        />
        <van-search
            v-model="company"
            placeholder="请手动输入地址"
            show-action
            shape="round">
          <div slot="action" @click="companyShow = false">确定</div>
        </van-search>
      </div>
      <div v-else>
        <van-search
            v-model="companySearch"
            placeholder="请输入工作单位关键词"
            show-action
            shape="round"
            @search="onSearch">
          <div slot="action" @click="onSearch">搜索</div>
        </van-search>

        <div class="comany_list">
          <van-cell v-for="item in companyList" :key="item.creditCode" :value="item.companyName" @click="company = item.companyName;companyShow = false" />
          <div v-if="!companyList" class="no_company">
            <a href="javascript:;" class="no_a_comany" @click="manualShowt = true">手动输入 >></a>
            <van-icon name="warning-o" />
            <P>未查询到企业,可选择手动输入</P>
          </div>
        </div>
      </div>
    </van-popup>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
    <!--选择地址-->
    <van-popup
        v-model="addressShow"
        position="bottom"
        :style="{ height: '60%' }">
      <van-nav-bar
          title="选择地址"
          left-text="返回"
          right-text="确定"
          left-arrow
          @click-left="returnAddress"
          @click-right="defineAddress"
      />
      <div class="address_list">
        <van-cell v-for="item in addressList" :key="item.code" :value="item.name" @click="getAddress(item.id, item.name)" />
      </div>
    </van-popup>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
import dragLoding from '@/components/loding'
import { isMobile } from '@/utils/validate'
import { getUUID } from '@/utils'
import md5 from 'js-md5'
export default {
  name: 'subsidy_login',
  components: {
    dragLoding
  },
  data () {
    return {
      showLoding: true,
      gzOrbeijing: true, // 默认北京
      companyShow: false,
      manualShowt: false,
      addressShow: false,
      codeText: '获取验证码',
      setIntervalTime: null,
      serveTime: 0,
      addressList: [],
      addressIdList: [],
      addressNameList: [],
      companyList: [],
      companySearch: '',
      company_name: '',
      captchaPath: '',
      // 以下是提交参数
      phone: '',
      company: '',
      address: '',
      imgCode: '',
      code: '',
      gsign: '',
      name: ''
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/7/18 0018 15:01
     *@function  搜索企业
     *****************************************/
    onSearch () {
      this.$jsonp(`http://www.workeredu.com/index.php?c=apis&m=getCompany&company=${this.companySearch}`).then(json => {
        if (json.status === 0) {
          this.companyList = null
          return
        }
        this.companyList = json.data
      }).catch(err => {
        console.log(err)
      })
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/19 0019 10:39
     *@function  选择第地区返回上一级
     *****************************************/
    returnAddress () {
      this.addressIdList.pop()
      this.addressNameList.pop()
      if (this.addressIdList.length === 0) {
        this.getAddress()
      } else {
        this.getAddress(this.addressIdList[this.addressIdList.length - 1])
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/19 0019 11:31
     *@function 选择地址确定
     *****************************************/
    defineAddress () {
      this.address = ''
      this.addressNameList.forEach(item => {
        this.address = this.address + ' ' + item
        this.addressShow = false
      })
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/26 0026 17:19
     *@function  判断是否领取过
     *****************************************/
    isReceive (phone) {
      this.$jsonp(`${window.SITE_CONFIG['subsidyURL']}/?s=subsidy&c=Subsidy_ticket2&m=checkUserData&phone=${phone}`).then(json => {
        if (json.status !== 1) {
          this.showLoding = false
          return false
        }
        window.location.href = `${window.SITE_CONFIG['subsidyURL']}/btq/client/workeredu-ticket/list/list.html?phone=${phone}&returnUrl=https://m.oucgz.cn/web/professionalListNew?gsign=${this.$route.query.gsign}`
      }).catch(err => {
        console.log(err)
      })
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/18 0018 15:01
     *@function  获取地址
     *****************************************/
    getAddress (id, name) {
      document.getElementsByName('address_list').scrollTop = 0
      if (id) {
        if (id && name) {
          this.addressIdList.push(id)
          this.addressNameList.push(name)
        }
        this.$jsonp(`${window.SITE_CONFIG['subsidyURL']}/index.php?s=apiv&c=api&m=get_City&isApp=1&city_id=${id}`).then(json => {
          if (json.data.length === 0) {
            this.addressShow = false
            this.defineAddress()
          }
          this.addressList = json.data
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.addressNameList = []
        this.addressIdList = []
        this.$jsonp(`${window.SITE_CONFIG['subsidyURL']}/index.php?s=apiv&c=api&m=get_City&isApp=1`).then(json => {
          this.addressList = json.data
        }).catch(err => {
          console.log(err)
        })
      }
    },
    /*
       *@author wf_Huang
       *@Time 2019/7/16 0016 17:26
       *@function  获取图片验证码
       *****************************************/
    getCaptcha () {
      this.captchaPath = `${window.SITE_CONFIG['personalURL']}/captcha?${getUUID()}`
    },
    /*
       *@author wf_Huang
       *@Time 2019/7/16 0016 17:02
       *@function  d登录领取补贴
       *****************************************/
    setsubsidy_login () {
      if (!isMobile(this.phone)) {
        this.$toast('手机号格式有误')
        return false
      }
      if (!this.code) {
        this.$toast('请输入验证码')
        return false
      }
      if (!this.name) {
        this.$toast('请输入姓名')
        return false
      }
      if (!this.address) {
        this.$toast('请输入工作单位所在地')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/index`,
        method: 'post',
        data: {
          gsign: this.gsign,
          phone: this.phone,
          phoneCode: this.code,
          name: this.name,
          company: this.company,
          address: this.address,
          region_id: this.addressIdList[this.addressIdList.length - 1]
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 202) {
          this.$toast('验证码错误')
          return false
        }
        if (res.status !== 200) {
          this.$toast('领取补贴失败')
          return false
        }
        if (this.$route.query.device === 'app') {
          // eslint-disable-next-line no-undef
          Phone.goCardbag()
        } else {
          window.location.href = `${window.SITE_CONFIG['subsidyURL']}/btq/client/workeredu-ticket/list/list.html?phone=${this.phone}&returnUrl=https://m.oucgz.cn/web/professionalListNew?gsign=${this.$route.query.gsign}`
        }
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/29 0029 9:33
     *@function  获取时间戳  验证码
     *****************************************/
    getTime () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/time`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        this.serveTime = res.data
        this.getCodeNumber()
      }).catch(() => {})
    },
    getCodeNumber () {
      if (!isMobile(this.phone)) {
        this.$toast('手机号格式有误')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/sentSms`,
        method: 'post',
        data: {
          phone: this.phone,
          sign: md5(this.phone + 'wxPhoneSms' + this.serveTime),
          time: this.serveTime
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 202) {
          this.$toast('验证码错误')
          this.getCaptcha()
          return false
        }
        if (res.status !== 200) {
          this.$toast('验证码发送失败')
          return false
        }
        var _this = this
        var timeNumber = 60
        this.$toast('验证码已发送')
        this.setIntervalTime = setInterval(function () {
          _this.codeText = `${timeNumber}s重新发送`
          if (timeNumber <= 0) {
            _this.codeText = '获取验证码'
            clearInterval(_this.setIntervalTime)
          }
          timeNumber--
        }, 1000)
      }).catch(() => {})
    },
    anchorExplanation (selector) {
      const returnEle = document.querySelector('#anchor_img')
      returnEle.scrollIntoView({ behavior: 'smooth' })
    }
  },
  computed: {},
  created () {
    this.getCaptcha()
  },
  mounted () {
    var phone = Cookies.get('phone') || this.$route.query.phone || this.$store.state.personal.phone
    if (phone) {
      this.isReceive(phone)
    } else {
      this.showLoding = false
    }
    this.getCaptcha()
    this.getAddress()
    document.querySelector('body').setAttribute('style', 'background-color:#FA7C22')
    if (this.$route.query.gsign === 'qy') { // gkzx是广州  qy是北京  ?gsign=qy&device='app'
      this.gzOrbeijing = true
    }
    if (this.$route.query.gsign === 'gkzx') {
      this.gzOrbeijing = false
    }
    this.gsign = this.$route.query.gsign

    if (this.$route.query.device === 'app') {
      try {
        // eslint-disable-next-line no-undef
        Phone.needUserInfo()
        var _this = this
        window.appUserInfo = function (data) {
          if (data) {
            _this.phone = data.phone || ''
          } else {
            // eslint-disable-next-line no-undef
            Phone.Discount()
          }
        }
      } catch (e) {}
    }
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .subsidy_login {
    padding: 900px 35px 100px;
    text-align: center;
    background: #FA7C22 url("../../../assets/img/modules/subsidy/subsidy_6.png") no-repeat  top;
    background-size: 100% auto;
    #anchor_img{
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    }
    .anchor_explanation{
      font-size: 30px;
      color: #ffffff;
      position: absolute;
      top: 30px;
      right: 40px;
      text-decoration: underline;
    }
    .item_input{
      width: 100%;
      height: 96px;
      position: relative;
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      input{
        border: 0;
        width: 100%;
        font-size: 28px;
        background: transparent;
        color: #222222;
        padding: 20px;
        &::placeholder{
          font-size: 28px;
          color: #999999;
        }
      }
      .input_bg{
        background: #FFFFFF;
        box-shadow: inset 0 -4px 8px 0 rgba(250,124,34,0.70);
        border-radius: 8px;
        color: #222222;
        border: 0;
        width: 100%;
        height: 96px;
        display: flex;
        align-items: center;
      }
      .code_img{
        width: 41%;
        height: 96px;
        margin-left: 15px;
        background-color: #efefef;
        display: block;
      }
      button{
        width:  70%;
        height: 96px;
        margin-left: 15px;
        border-radius: 5px;
        font-size: 32px;
        color: #ffffff;
        border: 0;
        display: block;
      }
    }
    .serve_text{
      font-size: 26px;
      color: #FFD9BE;
      text-align: center;
    }
    .subsidy_login_btn{
      background: #FA7C22 url("../../../assets/img/modules/subsidy/subsidy_4.png") no-repeat  center;
      background-size: 100% auto;
      width: 680px;
      height: 120px;
      border: 0;
      margin-bottom: 100px;
    }
    .active{
      background: #027FFE;
    }
    .hb_img{
      width: 100%;
      height: auto;
      margin: 35px 0 0 0;
      box-shadow: inset 0 -4px 13px 6px rgba(250,124,34,0.60);
      border-radius: 8px;
    }
    .footer_body{
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      .p_list{
        display: flex;
        align-content: space-between;
        flex-direction: column;
        p{
          font-size: 28px;
          color: #FFFFFF;
          text-align: left;
        }
      }
      img{
        width: 216px;
        height: 216px;
      }
    }
    .comany_list{
      height: calc(100% - 120px);
      overflow: auto;
    }
    .address_list{
      height: calc(100% - 100px);
      overflow: auto;
    }
    .no_a_comany{
      display: block;
      text-align: left;
      padding: 30px;
      font-size: 30px;
    }
    .no_company{
      font-size: 30px;
      color: #e6e6e6;
      text-align: center;
      padding: 0 0;
      i{
        font-size: 160px;
      }
    }
    .manual_input{

    }
  }
</style>
